<template>
  <div>
    <div class="chart-scrollbar" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
		  <div class="chart-warp layout-view-bg-white">
        <div class="chart-warp-top">
          <ChartHead />
          <div style="margin:15px 15px">
            <h2 style='color:#409EFF' class="advanced-title">绩效考核</h2><br>
            <span>绩效考核（performance examine），是企业绩效管理中的一个环节，是指考核主体对照工作目标和绩效标准，采用科学的考核方式，评定员工的工作任务完成情况、员工的工作职责履行程度和员工的发展情况，并且将评定结果反馈给员工的过程。</span><br><br>
            <span>本系统绩效考核方法包括
              <el-button type="text" @click="dialogVisible = true"><i>KPI</i></el-button>、
              <!-- <el-button type="text" @click="dialogVisible2 = true"><i>BSC</i></el-button>、 -->
              <el-button type="text" @click="dialogVisible3 = true"><i>OKR</i></el-button>、
              <el-button type="text" @click="dialogVisible4 = true"><i>360度</i></el-button>
              考核等，HR可自行选择。</span>
          </div>


          <div v-if="getUserInfos.userName !== 'teamleader'">
            <el-row justify='center' type='flex'>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div align='center' height='30px' v-show="ways">
                  <strong style="font-size:20px">选择考核方式</strong>
                </div>
              </el-col>
            </el-row>

            <el-row justify='center' type='flex'>
              <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
                <transition name="el-zoom-in-center">
                  <el-card class="main" shadow="hover" v-show="ways" style="margin:15px">
                    <template #header>
                      <div class="card-header" >
                          <h3>KPI考核方式</h3>
                      </div>
                    </template>
                    <div style="height: 150px">
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 等级描述法</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 关键事件法</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 确定里程碑法</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 适用互联网IT团队</span><br><br>
                    </div>
                    <div align='center'>
                      <el-button type="primary" @click="dialogFormVisible = true">开始使用</el-button>
                    </div>
                  </el-card>
                </transition>
              </el-col>

              <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7" class="home-warning-media">
                <transition name="el-zoom-in-top">
                  <el-card class="main" shadow="hover" v-show="ways" style="margin:15px">
                    <template #header>
                      <div class="card-header" >
                          <h3>OKR考核</h3>
                      </div>
                    </template>
                    <div style="height: 150px">
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 首先要确定目标</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 设定时间(通常是一个季度)</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 考核结果量化指标形式呈现</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 强调基层员工的创造力</span><br><br>
                    </div>
                    <div align='center'>
                      <el-button type="primary" @click="ways1 = true">开始使用</el-button>
                    </div>
                  </el-card>
                </transition>
              </el-col>

              <el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7" class="home-warning-media">
                <transition name="el-zoom-in-bottom">
                  <el-card class="main" shadow="hover" v-show="ways" style="margin:15px">
                    <template #header>
                      <div class="card-header" >
                          <h3>360度考核</h3>
                      </div>
                    </template>
                    <div style="height: 150px">
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 确定360度考核法的使用范围</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 设计考核问卷</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 确定由谁来实施评价</span><br><br>
                      <span><i class='el-icon-circle-check' :style="{color:iconColor}"></i> 利用好结果反馈</span><br><br>
                    </div>
                    <div align='center'>
                      <el-button type="primary" @click="ways = false">开始使用</el-button>
                    </div>
                  </el-card>
                </transition>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>



    <el-row justify='center' type='flex'>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div align='center' v-show="ways1" style='margin:20px 0 0 0;'>
          <transition name="el-zoom-in-center">
            <Graph1/>
          </transition>
        </div>
      </el-col>
    </el-row>

    <el-row justify='center' type='flex'>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div align='center' v-show="ways1" style='margin:20px 0 10px 0;width:100%'>
          <transition name="el-zoom-in-center">
            <Graph2/>
          </transition>
        </div>
      </el-col>
    </el-row>


    <el-row justify='center' type='flex'>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div align='center' v-if="getUserInfos.userName === 'teamleader'" style='margin:20px 0 0 0;'>
          <transition name="el-zoom-in-center">
            <Graph1/>
          </transition>
        </div>
      </el-col>
    </el-row>

    <el-row justify='center' type='flex'>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div align='center' v-if="getUserInfos.userName === 'teamleader'" style='margin:20px 0 10px 0;width:100%'>
          <transition name="el-zoom-in-center">
            <Graph2/>
          </transition>
        </div>
      </el-col>
    </el-row>

    <div class='dialog'>


      <el-dialog
        title="KPI考核绩效考核指标"
        v-model="dialogFormVisible"
        width="70%"
        :before-close="handleClose"
        center>
        <Demo/>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="f1">下 一 步</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="选择部门-项目组"
        v-model="chooseDepartment"
        width="40%"
        :before-close="handleClose"
        center>
        <Demo1/>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="f2">增加指标</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="UI岗位工作质量考核指标"
        v-model="positionDemo1"
        width="60%"
        :before-close="handleClose"
        center>
        <PositionDemo1/>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="positionDemo1 = false">取 消</el-button>
            <el-button type="primary" @click="f3">增加指标</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="产品岗位工作质量考核指标"
        v-model="positionDemo2"
        width="60%"
        :before-close="handleClose"
        center>
        <PositionDemo2/>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="positionDemo2 = false">取 消</el-button>
            <el-button type="primary" @click="f4">增加指标</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="测试岗位工作质量考核指标"
        v-model="positionDemo3"
        width="60%"
        :before-close="handleClose"
        center>
        <PositionDemo3/>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="f5">创建</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="KPI关键绩效指标"
        v-model="dialogVisible"
        width="40%"
        :before-close="handleClose"
        center>
        <span><strong>关键绩效指标</strong>(KPI：Key Performance Indicator)是通过对组织内部流程的输入端、输出端的关键参数进行设置、取样、计算、分析，衡量流程绩效的一种目标式量化管理指标，是把企业的战略目标分解为可操作的工作目标的工具，是企业绩效管理的基础。KPI可以是部门主管明确部门的主要责任，并以此为基础，明确部门人员的业绩衡量指标。建立明确的切实可行的KPI体系，是做好绩效管理的关键。关键绩效指标是用于衡量工作人员工作绩效表现的量化指标，是绩效计划的重要组成部分。</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="OKR(目标与关键成果法)"
        v-model="dialogVisible3"
        width="40%"
        :before-close="handleClose"
        center>
        <span><strong>OKR</strong>(Objectives and Key Results)又叫做<strong>目标与关键成果法</strong>，是定义和跟踪目标及其完成情况的管理工具和方法，现在主要应用于IT、风险投资、创意等领域。OKR可以在采取行动之前培养长期思考与计划的纪律性。对于代理人，把目标写在纸上也会明确期望，并能使发展的定义和成功的定义进行量化。对于其他利益相关者，OKR可以在主题和优先级上实现透明化，并支持跨职能的交流。</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        title="360度绩效考核"
        v-model="dialogVisible4"
        width="40%"
        :before-close="handleClose"
         center>
        <span><strong>360度绩效考核法</strong>是指从各个角度来了解个人绩效的方法，是同事评、上司打分、直接领导评、自评，有时候客户评等综合评价的结果。评价方面包括沟通能力、人际关系处理能力、领导能力、……通过这种理想的绩效评估，员工可从不同的反馈了解到自己的不足、长处与发展需求，这样有利于员工制定合适自己的职业发展道路。</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive, ref, onMounted, getCurrentInstance,computed} from 'vue'
import ChartHead from '/@/views/performance_appraisal/HR/head.vue';
import Demo from '/@/views/performance_appraisal/HR/component/demo.vue';
import Demo1 from '/@/views/performance_appraisal/HR/component/demo1.vue';
import PositionDemo1 from '/@/views/performance_appraisal/HR/component/position_demo1.vue';
import PositionDemo2 from '/@/views/performance_appraisal/HR/component/position_demo2.vue';
import PositionDemo3 from '/@/views/performance_appraisal/HR/component/position_demo3.vue';
import Graph1 from '/@/views/performance_appraisal/HR/component/graph1.vue';
import Graph2 from '/@/views/performance_appraisal/HR/component/graph2.vue';
import { useStore } from '/@/store/index.ts';

export default ({
  components: { ChartHead, Demo, Demo1, PositionDemo1, PositionDemo2, PositionDemo3, Graph1, Graph2 },

  setup () {
    const store = useStore();
    const state = reactive({})

    // 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
    });

    return {
			getUserInfos,
			...toRefs(state),
		};
  },
  data() {
      return {
        dialogVisible: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogFormVisible: false,
        chooseDepartment:false,
        positionDemo1:false,
        positionDemo2:false,
        positionDemo3:false,
        ways: true,
        ways1: false,
        iconColor: '#67C23A',
      };
    },
    methods: {
      f1(){
        const loading = this.$loading({
            lock: true,
            text: '正在保存,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.dialogFormVisible = false;
          this.chooseDepartment = true;
        }, 500);
      },
      f2(){
        const loading = this.$loading({
            lock: true,
            text: '正在保存,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.chooseDepartment = false;
          this.positionDemo1 = true;
        }, 500);
      },
      f3(){
        const loading = this.$loading({
            lock: true,
            text: '正在保存,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.positionDemo1 = false;
          this.positionDemo2 = true;
        }, 500);
      },
      f4(){
        const loading = this.$loading({
            lock: true,
            text: '正在保存,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.positionDemo2 = false;
          this.positionDemo3 = true;
        }, 500);
      },
      f5(){
        const loading = this.$loading({
            lock: true,
            text: '正在保存,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.positionDemo3 = false;
          this.ways = false;
          this.ways1 = true;
        }, 500);
      }
    },
});
  </script>
<style lang="scss">
@import './chart.scss';
.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}

.box-card{
  margin:0 0 10px 0;
}

.el-card{
  border: 1px solid rgb(179, 216, 255);
  border-radius: 4px;
  transition: .3s;
}
</style>
